<template>
  <picker-view
    indicator-style="height: 45px; max-width:128rpx; border: none;overflow: hidden;"
    indicator-class="picker-selected"
    class="picker-date"
    :value="dateValue"
    @change="changeDate"
  >
    <picker-view-column>
      <view
        class="item"
        v-for="(item, index) in years"
        style="line-height: 45px"
        :key="index"
        :class="{ active: index === dateValue[0] }"
        >{{ item }}</view
      >
    </picker-view-column>
    <text class="tips">年</text>
    <picker-view-column style="width: 64rpx">
      <view
        class="item"
        v-for="(item, index) in months"
        :key="index"
        :class="{ active: index === dateValue[1] }"
        style="line-height: 45px; height: 45px"
        >{{ item }}</view
      >
    </picker-view-column>
    <text class="tips">月</text>
    <picker-view-column style="width: 64rpx">
      <view
        class="item"
        v-for="(item, index) in days"
        :key="index"
        :class="{ active: index === dateValue[2] }"
        style="line-height: 45px; height: 45px"
        >{{ item }}</view
      >
    </picker-view-column>
    <text class="tips">日</text>
  </picker-view>
</template>
<script lang="ts" setup>
const props = defineProps<{
  modalShow?: boolean
  eiditShow?: number[] | string[]
}>()
const emit = defineEmits<{
  (e: 'change', date: string): void
}>()
watch(
  () => props.modalShow,
  () => {
    if (props.modalShow) {
      createDate()
    }
  }
)
const dateValue = ref<number[]>([0, 0, 0])
const years = ref<number[]>([])
const months = ref<string[]>([])
const days = ref<string[]>([])
function createDate() {
  const year = new Date().getFullYear()
  for (let i = year - 100; i <= year; i++) {
    years.value.unshift(i)
  }
  let month: string | number = new Date().getMonth() + 1
  month = (month < 10 ? '0' : '') + month
  for (let i = 1; i <= 12; i++) {
    months.value.push((i < 10 ? '0' : '') + i)
  }
  let day: string | number = new Date().getDate()
  day = (day < 10 ? '0' : '') + day
  for (let i = 1; i <= 31; i++) {
    days.value.push((i < 10 ? '0' : '') + i)
  }
  nextTick(() => {
    if (props.eiditShow && props.eiditShow.length > 0) {
      dateValue.value = [
        years.value.findIndex((items) => items == props.eiditShow?.[0]),
        months.value.findIndex((items) => items == props.eiditShow?.[1]),
        days.value.findIndex((items) => items == props.eiditShow?.[2]),
      ]
    } else {
      dateValue.value = [
        0,
        months.value.findIndex((items) => items === month),
        days.value.findIndex((items) => items === day),
      ]
    }
    switchDate()
  })
}
function changeDate(e: any) {
  dateValue.value = e.detail.value
  switchDate()
}
function switchDate() {
  let date = `${years.value[dateValue.value[0]]}-${months.value[dateValue.value[1]]}-${days.value[dateValue.value[2]]}`
  console.error(date)
  emit('change', date)
}
</script>
<style lang="less" scoped>
.picker-date {
  width: 100%;
  height: 216rpx;
  /deep/ .picker-selected {
    position: relative;
  }
  /deep/ .picker-selected::before {
    content: '';
    position: absolute;
    top: 0px;
    border: none;
  }
  /deep/ .picker-selected::after {
    content: '';
    position: absolute;
    bottom: 0;
    border: none;
  }

  // height: 100%;
  .item {
    font-size: 32rpx;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tips {
    display: flex;
    align-items: center;
    margin: 0 0rpx;
  }

  .active {
    font-weight: 600;
    font-size: 32rpx;
    color: var(--primary-color);
    border: none;
    outline: none;
  }
  /**
   * 去除默认样式
   */
  .picker-mask {
    background: transparent;
    border: none;
  }
  .picker-indicator {
    height: 72rpx;
    &::before,
    &::after {
      border: none;
    }
  }

  .picker-item {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 36rpx;
    line-height: 50rpx;
    transition: all 0.2s ease;
    &.active {
      font-weight: 600;
      font-size: 48rpx;
      line-height: 68rpx;
      color: var(--primary-color);
    }
    > .text {
      width: 140rpx;
      text-align: center;
    }
  }
  .picker-column {
    &.align-left .picker-item {
      justify-content: flex-start;
    }
    &.align-right .picker-item {
      justify-content: flex-end;
    }
  }
}
</style>
